<template>
    <div class="maxBox">
        <div class="boxTop">
            <el-row type="flex" justify="space-between" align="middle">
                <el-col :span="24" class="search-form">
                    <el-form :inline="true" :model="formInline" size="mini">
                        <el-form-item label="ID搜索">
                            <el-input v-model="formInline.id" placeholder="请输入内容"></el-input>
                        </el-form-item>
                        <el-form-item label="名称搜索">
                            <el-input v-model="formInline.name" placeholder="请输入内容"></el-input>
                        </el-form-item>
                        <el-form-item label="类型搜索">
                            <el-select v-model="formInline.type" filterable placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary">清空</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
        <div class="boxSen">
            <div>
                <el-button type="primary" plain class="btn" @click="addInformation">添加</el-button>
<!--                添加信息的模态框-->
                <el-dialog title="添加客户信息" :visible.sync="dialogFormVisible" width="500px">
                    <el-form :model="form">
                        <el-form-item label="客户名称">
                            <el-input v-model="form.companyName" autocomplete="off" class="iptWidth"></el-input>
                        </el-form-item>
                        <el-form-item label="客户电话">
                            <el-input v-model="form.phone" autocomplete="off" class="iptWidth"></el-input>
                        </el-form-item>
                        <el-form-item label="开始日期">
                            <el-input v-model="form.startTime" autocomplete="off" class="iptWidth"></el-input>
                        </el-form-item>
                        <el-form-item label="结束日期">
                            <el-input v-model="form.endTime" autocomplete="off" class="iptWidth"></el-input>
                        </el-form-item>
                        <el-form-item label="项目内容">
                            <el-input v-model="form.projectcontent" autocomplete="off" class="iptWidth"></el-input>
                        </el-form-item>
                        <el-form-item label="负责人员">
                            <el-input v-model="form.projectLeader" autocomplete="off" class="iptWidth"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addTrue">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
            <!--    表格-->
            <el-row class="user-list">
                <el-col :span="19">
                    <el-table
                            class="boxTable"
                            :header-cell-style="{'text-align':'center'}"
                            :body-cell-style="{'text-align':'center'}"
                            :cell-style="{'text-align':'center'}"
                            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                            border
                            style="width: 100%">
                        <!-- companyname: null--><!-- courtypename: null--><!-- endtime: null-->
                        <!-- phone: 0--><!-- projectcontent: null--><!-- projectleader: 0-->
                        <!-- rows: null--><!-- sreid: 0--><!-- start: null--><!-- starttime: null-->
                        <el-table-column prop="sreid" label="编号" width="100"></el-table-column>
                        <el-table-column prop="starttime" label="开始日期" width="150"></el-table-column>
                        <el-table-column prop="endtime" label="结束日期" width="150"></el-table-column>
                        <el-table-column prop="companyname" label="公司名" width="150"></el-table-column>
                        <el-table-column prop="phone" label="电话" width="150"></el-table-column>
                        <el-table-column prop="projectcontent" label="项目内容" width="270"></el-table-column>
                        <el-table-column prop="projectleader" label="负责人" width="120"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="150">
                            <template slot-scope="scope">
                                <el-button @click="seeClick(scope.row)" type="text" size="small">查看</el-button>
                                <el-button type="text" size="small" @click="">编辑</el-button>
                                <el-button type="text" size="small" @click="delColumn(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </div>

        <!--        查看模态框-->
        <div>
            <el-dialog :visible.sync="seeTableVisible">
                <el-table :data="arr">
                    <el-table-column prop="sreid" label="编号" width="100"></el-table-column>
                    <el-table-column prop="starttime" label="开始日期" width="150"></el-table-column>
                    <el-table-column prop="endtime" label="结束日期" width="150"></el-table-column>
                    <el-table-column prop="companyname" label="公司名" width="150"></el-table-column>
                    <el-table-column prop="phone" label="电话" width="150"></el-table-column>
                    <el-table-column prop="projectcontent" label="项目内容" width="280"></el-table-column>
                    <el-table-column prop="projectleader" label="负责人" width="120"></el-table-column>
                </el-table>
            </el-dialog>
        </div>

        <div class="user-list" type="flex" justify="center" style="text-align: center">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10,15, 20]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.length">
            </el-pagination>
        </div>
        <div>

        </div>
    </div>


</template>
<script>
    export default {
        data() {
            return {
                dialogFormVisible: false,
                seeTableVisible: false,
                formInline: {id: '', name: '', type: ''},
                // 分页
                currentPage: 1, //当前页
                pageSize: 5, //每页显示
                arr: [
                    {
                        sreid:'',
                        startTime:'',
                        endTime:'',
                        companyname:'',
                        phone:'',
                        projectcontent:'',
                        projectleader:''
                    }
                ],
                options: [
                    {
                        value: '选项1',
                        label: 'OA一级客户'
                    },
                    {
                        value: '选项2',
                        label: 'OA二级客户'
                    },
                    {
                        value: '选项3',
                        label: 'OA三级客户'
                    },
                    {
                        value: '选项4',
                        label: 'OA四级客户'
                    },
                ],
                value: '',
                tableData: [
                    // {
                    //     idCard: "2019041500001",
                    //     date: '2016-05-02',
                    //     name: '王小虎',
                    //     phone: 15884319190,
                    //     administrator: "cc",
                    //     address: '上海市普陀区金沙江路 1518 弄'
                    // },
                    // {
                    //     idCard: "2019041500001",
                    //     date: '2016-05-04',
                    //     name: '王小虎',
                    //     phone: 15884319190,
                    //     administrator: "cc",
                    //     address: '上海市普陀区金沙江路 1517 弄'
                    // },
                    // {
                    //     idCard: "2019041500001",
                    //     date: '2016-05-01',
                    //     name: '王小虎',
                    //     phone: 15884319190,
                    //     administrator: "cc",
                    //     address: '上海市普陀区金沙江路 1519 弄'
                    // },
                    // {
                    //     idCard: "2019041500001",
                    //     date: '2016-05-03',
                    //     name: '王小虎',
                    //     phone: 15884319190,
                    //     administrator: "cc",
                    //     address: '上海市普陀区金沙江路 1516 弄'
                    // }
                ],
                form: {
                    sreid:'',
                    startTime:'',
                    endTime:'',
                    companyname:'',
                    phone:'',
                    projectcontent:'',
                    projectleader:''
                }
            }
        },
        created() {
            let that = this
            that.$axios({
                method: "post",
                url: '/api/getSreCustomersById',
                data: JSON.stringify({})
            })
                .then(data => {
                    console.log(data)
                    this.tableData = data.data.data
                })
        },
        methods: {
            getList() {
                let that = this
                that.$axios({
                    method: "post",
                    url: '/api/updateSreCustomer',
                    data: JSON.stringify({})
                })
                    .then(data => {
                        //
                        console.log("---------------------====",data)
                        this.tableData = data.data.data
                    })
            },
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val
            },
            addInformation(){
                this.dialogFormVisible = true;
            },
    // {
            //     sreid:'',
            //     startTime:'',
            //     endTime:'',
            //     companyname:'',
            //     phone:'',
            //     projectcontent:'',
            //     projectleader:''
            // }
            addTrue(){
                this.dialogFormVisible = false;
                let that = this;
                let data = this.form
                let url = '/api/addSreCustomer'
                // console.log(this.form)
                this.$axios({
                    method:'post',
                    url:url,
                    data:JSON.stringify(data)
                })
                .then(res=>{
                    // console.log(res)
                    that.$axios({
                        method: "post",
                        url: '/api/getSreCustomersById',
                        data: JSON.stringify({})
                    })
                        .then(data => {
                            console.log(data)
                            that.tableData = data.data.data
                        })
                })
            },
            seeClick(row) {
                console.log(row)
                this.seeTableVisible = true;
                this.arr[0].sreid = row.sreid;
                this.arr[0].starttime = row.starttime;
                this.arr[0].endtime = row.endtime;
                this.arr[0].companyname = row.companyname;
                this.arr[0].phone = row.phone;
                this.arr[0].projectcontent = row.projectcontent;
                this.arr[0].projectleader = row.projectleader;
            },
            //删除单行信息
            delColumn(row) {
                console.log("row========",row)
                let that = this;
                that.$axios({
                    method:'post',
                    url:'/api/deleteSreCustomer',
                    data: JSON.stringify({
                        sreid: row.sreid,
                    }),
                    headers:{
                        "Content-Type": "application/json;charset=UTF-8",
                    }
                })
                    .then(data => {
                        // console.log(data)
                        // this.tableData = data.data.data

                        that.$axios({
                            method: "post",
                            url: '/api/getSreCustomersById',
                            data: JSON.stringify({})
                        })
                            .then(data => {
                                console.log(data)
                                that.tableData = data.data.data
                            })
                    })
            },
        },
    };
</script>

<style scoped lang="less">
    .maxBox{
        margin: 10px 0 0 25px ;
    }
    .iptWidth {
        width: 70%;
    }

    .boxTop {
        font-size: 18px;
        font-weight: bolder;
        border: 1px solid #e4e4e4;
        padding: 20px 20px 0;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
    }

    .user-list {
        margin: 10px 0;
        padding: 20px;
        border: 1px solid #e4e4e4;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
    }

    .btn {
        margin: 10px 0 0 0;
    }

    .topSen {
        width: 100%;
    }

    .boxTable {
        margin: 0 150px;
    }
</style>

